<!--  -->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜谱管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!--步骤条切换-->
      <el-steps :active="active" finish-status="success">
        <el-step title="第一步添加菜谱主体信息"></el-step>
        <el-step title="添加材料信息"></el-step>
        <el-step title="菜谱做法步骤"></el-step>
      </el-steps>
      <!--选项卡切换操作-->
      <el-tabs v-model="activeName">
        <!--填写菜谱表单主板块-->
        <el-tab-pane name="1">
          <!--菜谱信息添加和单张图片一起上传-->
          <el-form ref="form" v-model="form" label-width="80px">
            <el-row :gutter="20"><!--栅格系统-->
            <!--菜谱类型-->
              <el-col :span="6">
                <el-form-item label="菜谱类型">
                  <template>
                    <el-select v-model="form.mtypeid" placeholder="请选择菜谱类型">
                      <el-option v-for="item in options" :key="item.typeid" :label="item.typename" :value="item.typeid">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="8">
               <el-form-item label="菜谱名称">
                 <el-input v-model="form.mtitle"></el-input>
               </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="菜谱图片">
                  <el-upload :auto-upload="false" :on-change="onchange" :on-remove="handleRemove" :limit="1" list-type="picture-card"
                    action="#">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <!--图片展示-->
                  <el-dialog>
                    <img width="100%" :src="src" alt="">
                  </el-dialog>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <!-- @keyup.enter="menuNext" 键盘事件 -->
                  <el-button class="menubtn" type="primary" @click="menuNext">下一步</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <!--添加材料的板块-->
        <el-tab-pane name="2">
          <!--材料子组件-->
          <MsNode @msEvent="getMs"></MsNode>
          <!-- <el-button style="margin-top: 12px;" @click="msNext">下一步</el-button> -->
        </el-tab-pane>

        <!--填写菜谱步骤板块-->
        <el-tab-pane name="3">
          <!--步骤子组件-->
          <StepNode @stepEvent="getStep"></StepNode>
          <!--所有数据提交到后台-->
          <el-button :disabled="next" @click="onSubmit">提交</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>
<script src="../js/MenuAdd.js"></script>
<style>
  /*添加菜谱的下一步按钮*/
  .menubtn {
    position: absolute;
    margin-left: 400px;
    margin-top: -45px;
  }
</style>
